import React, { useState, useRef, useEffect } from 'react';
import { Card, Input, Button, List, Avatar, Typography, Space, Divider, Spin, Select, Tag, Tooltip, Radio, Drawer, Empty, message, Tabs, Collapse, Switch, Upload, Badge, Alert } from 'antd';
import { 
  SendOutlined, 
  UserOutlined, 
  RobotOutlined, 
  HistoryOutlined, 
  SaveOutlined, 
  DeleteOutlined, 
  CopyOutlined, 
  LoadingOutlined, 
  SettingOutlined,
  FileTextOutlined,
  DatabaseOutlined,
  PlusOutlined,
  InfoCircleOutlined,
  ApiOutlined,
  GlobalOutlined,
  LinkOutlined,
  FileAddOutlined,
  UploadOutlined,
  QuestionCircleOutlined,
  PaperClipOutlined,
  ClearOutlined,
  SyncOutlined,
  WarningOutlined
} from '@ant-design/icons';
import { theme } from 'antd';
import { UploadFile } from 'antd/lib/upload/interface';
import { useModelsStore, Model } from '../../stores/modelsStore';
import MarkdownIt from 'markdown-it';
import hljs from 'highlight.js';
import 'highlight.js/styles/github.css'; // 导入代码高亮样式，可以选择不同的主题

const { Text, Paragraph, Title } = Typography;
const { Option } = Select;
const { TabPane } = Tabs;
const { Panel } = Collapse;

// 配置 markdown-it
const md: MarkdownIt = new MarkdownIt({
  html: false, // 禁用 HTML 标签
  linkify: true, // 自动将 URL 转换为链接
  typographer: true, // 启用一些语言中立的替换和引号
  highlight: function (str: string, lang: string): string {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return '<pre class="hljs"><code>' +
               hljs.highlight(str, { language: lang, ignoreIllegals: true }).value +
               '</code></pre>';
      } catch (__) {}
    }
    
    // 使用默认的转义
    return '<pre class="hljs"><code>' + md.utils.escapeHtml(str) + '</code></pre>';
  }
});

interface ChatMessage {
  id: string;
  content: string;
  role: 'user' | 'assistant' | 'system';
  timestamp: Date;
  metadata?: {
    sources?: {
      title: string;
      url?: string;
      content?: string;
    }[];
    tokens?: number;
    processingTime?: number;
    model?: string;
  };
}

interface ChatSession {
  id: string;
  title: string;
  createdAt: Date;
  updatedAt: Date;
  messages: ChatMessage[];
}

const ChatInterface: React.FC = () => {
  const [messages, setMessages] = useState<ChatMessage[]>([]);
  const [inputValue, setInputValue] = useState('');
  const [isTyping, setIsTyping] = useState(false);
  const [selectedModel, setSelectedModel] = useState<Model | null>(null);
  const [historyDrawerVisible, setHistoryDrawerVisible] = useState(false);
  const [settingsDrawerVisible, setSettingsDrawerVisible] = useState(false);
  const [chatSessions, setChatSessions] = useState<ChatSession[]>([]);
  const [currentSessionId, setCurrentSessionId] = useState<string | null>(null);
  const [uploadedFiles, setUploadedFiles] = useState<UploadFile[]>([]);
  const [useKnowledgeBase, setUseKnowledgeBase] = useState(true);
  const [selectedKnowledgeSources, setSelectedKnowledgeSources] = useState<string[]>([]);
  const messagesEndRef = useRef<HTMLDivElement>(null);
  const { token } = theme.useToken();
  const { llmModels, activeLlm, fetchModels } = useModelsStore();
  
  // 添加一个状态来控制是否显示思考过程
  const [showThinkingProcess, setShowThinkingProcess] = useState(true);
  
  // 获取Ollama可用模型列表
  const getOllamaAvailableModels = async (serverUrl: string): Promise<{success: boolean, models: string[], error?: string}> => {
    try {
      console.log('正在获取Ollama可用模型列表...');
      const response = await fetch(`${serverUrl}/api/tags`, {
        method: 'GET',
        headers: {
          'Accept': 'application/json',
        },
        cache: 'no-store'
      });
      
      if (!response.ok) {
        return {
          success: false,
          models: [],
          error: `服务器响应错误: ${response.status} ${response.statusText}`
        };
      }
      
      const data = await response.json();
      if (!data.models || !Array.isArray(data.models)) {
        return {
          success: true,
          models: [],
          error: '服务器返回了空的模型列表'
        };
      }
      
      // 提取模型名称列表
      const modelNames = data.models.map((m: any) => m.name || m.model);
      console.log('Ollama可用模型列表:', modelNames.join(', '));
      
      return {
        success: true,
        models: modelNames
      };
    } catch (error) {
      return {
        success: false,
        models: [],
        error: error instanceof Error ? error.message : '未知错误'
      };
    }
  };
  
  // 在模型列表中寻找最匹配的模型名
  const findBestMatchingModel = (targetModel: string | undefined, availableModels: string[]): string | null => {
    if (!targetModel || availableModels.length === 0) return null;
    
    // 1. 直接匹配
    if (availableModels.includes(targetModel)) {
      return targetModel;
    }
    
    // 2. 忽略大小写匹配
    const lowerCaseTarget = targetModel.toLowerCase();
    const lowerCaseMatch = availableModels.find(m => m.toLowerCase() === lowerCaseTarget);
    if (lowerCaseMatch) return lowerCaseMatch;
    
    // 3. 前缀匹配 (例如 "llama2" 可以匹配 "llama2:latest")
    const prefixMatch = availableModels.find(m => 
      m.toLowerCase().startsWith(lowerCaseTarget) || 
      lowerCaseTarget.startsWith(m.toLowerCase())
    );
    if (prefixMatch) return prefixMatch;
    
    // 4. 包含匹配 (例如 "llama" 可以匹配 "meta/llama2")
    const containsMatch = availableModels.find(m => 
      m.toLowerCase().includes(lowerCaseTarget) || 
      lowerCaseTarget.includes(m.toLowerCase())
    );
    if (containsMatch) return containsMatch;
    
    return null;
  };
  
  // 记录初始状态
  console.log('ChatInterface初始化', { 
    llmModelsCount: llmModels.length, 
    activeLlm, 
    selectedModel 
  });
  
  // 初始化时加载模型并确保默认使用语言模型
  useEffect(() => {
    setIsTyping(true);
    fetchModels().then(() => {
      // 模型加载完成后强制确保使用语言模型
      if (llmModels.length > 0) {
        // 首先尝试使用activeLlm
        if (activeLlm) {
          const activeModel = llmModels.find(model => model.id === activeLlm);
          if (activeModel) {
            setSelectedModel(activeModel);
            console.log('初始化选择activeLlm模型:', activeModel.name);
          }
        } 
        
        // 如果没有找到activeLlm对应的模型，尝试使用isActive标记
        if (!selectedModel) {
          const firstActiveModel = llmModels.find(model => model.isActive);
          if (firstActiveModel) {
            setSelectedModel(firstActiveModel);
            console.log('初始化选择isActive标记模型:', firstActiveModel.name);
          } else if (llmModels.length > 0) {
            // 如果没有活跃模型，选择第一个
            setSelectedModel(llmModels[0]);
            console.log('初始化选择第一个可用模型:', llmModels[0].name);
          }
        }
      } else {
        // 即使没有llmModels，也尝试从所有模型中找到语言模型
        const allModels = useModelsStore.getState().models;
        const languageModels = allModels.filter(model => model.type === 'llm');
        
        if (languageModels.length > 0) {
          // 找到了语言模型，选择第一个
          setSelectedModel(languageModels[0]);
          console.log('从所有模型中选择语言模型:', languageModels[0].name);
        } else if (allModels.length > 0) {
          // 如果没有语言模型，强制将第一个模型当作语言模型使用
          const firstModel = allModels[0];
          console.log('未找到语言模型，强制使用第一个可用模型:', firstModel.name);
          setSelectedModel(firstModel);
        } else {
          console.log('未找到任何可用模型，请确保至少有一个模型可用');
        }
      }
      
      setIsTyping(false);
    }).catch(error => {
      console.error('加载模型失败:', error);
      setIsTyping(false);
    });
    
    // 尝试恢复之前的知识库设置
    try {
      const savedKnowledgeBaseEnabled = localStorage.getItem('ai_assistant_knowledge_base_enabled');
      if (savedKnowledgeBaseEnabled !== null) {
        setUseKnowledgeBase(JSON.parse(savedKnowledgeBaseEnabled));
        console.log('已加载知识库启用状态:', JSON.parse(savedKnowledgeBaseEnabled));
      }
      
      const savedKnowledgeSources = localStorage.getItem('ai_assistant_knowledge_base_sources');
      if (savedKnowledgeSources) {
        setSelectedKnowledgeSources(JSON.parse(savedKnowledgeSources));
        console.log('已加载知识库来源:', JSON.parse(savedKnowledgeSources));
      }
    } catch (error) {
      console.error('加载知识库设置失败:', error);
    }
  }, [fetchModels, llmModels, activeLlm]);
  
  // 添加事件监听，响应模型状态变化
  useEffect(() => {
    // 监听LLM模型变更
    const handleLlmModelChanged = (event: CustomEvent) => {
      console.log('LLM模型已更改:', event.detail);
      if (event.detail && event.detail.modelId) {
        const modelId = event.detail.modelId;
        // 立即从模型列表中查找并设置
        const model = llmModels.find(m => m.id === modelId);
        if (model) {
          setSelectedModel(model);
          console.log('ChatInterface已更新选中的模型为:', model.name);
        } else {
          console.warn('无法找到ID为', modelId, '的模型');
          // 如果找不到指定ID的模型但有其他模型可用，选择第一个
          if (llmModels.length > 0) {
            setSelectedModel(llmModels[0]);
            console.log('找不到指定模型，已选择第一个可用模型:', llmModels[0].name);
          }
        }
      }
    };
    
    // 监听模型刷新完成事件
    const handleModelRefreshComplete = (event: CustomEvent) => {
      console.log('模型刷新完成，ChatInterface正在更新状态...', event.detail);
      
      // 确保有模型可用
      if (llmModels.length > 0) {
        // 尝试使用event.detail中的activeLlm
        if (event.detail && event.detail.activeLlm) {
          const model = llmModels.find(m => m.id === event.detail.activeLlm);
          if (model) {
            setSelectedModel(model);
            console.log('已更新为活跃模型:', model.name);
            return;
          }
        }
        
        // 尝试使用Store中的activeLlm
        if (activeLlm) {
          const model = llmModels.find(m => m.id === activeLlm);
          if (model) {
            setSelectedModel(model);
            console.log('已更新为Store中的活跃模型:', model.name);
            return;
          }
        }
        
        // 尝试使用isActive标记的模型
        const activeModel = llmModels.find(m => m.isActive);
        if (activeModel) {
          setSelectedModel(activeModel);
          console.log('已更新为isActive标记的模型:', activeModel.name);
          return;
        }
        
        // 如果都没有，使用第一个模型
        setSelectedModel(llmModels[0]);
        console.log('无法找到活跃模型，使用第一个可用模型:', llmModels[0].name);
      } else {
        console.log('模型列表为空，无法设置模型');
        setSelectedModel(null);
      }
    };
    
    // 添加事件监听器
    document.addEventListener('llm-model-changed', handleLlmModelChanged as EventListener);
    document.addEventListener('models-refresh-complete', handleModelRefreshComplete as EventListener);
    
    // 移除事件监听器
    return () => {
      document.removeEventListener('llm-model-changed', handleLlmModelChanged as EventListener);
      document.removeEventListener('models-refresh-complete', handleModelRefreshComplete as EventListener);
    };
  }, [llmModels, activeLlm]);
  
  // 单独添加一个用于确保模型选中的钩子，不受其他逻辑影响
  useEffect(() => {
    // 此钩子专门确保在任何情况下都至少选中一个可用模型
    if (!selectedModel && llmModels.length > 0) {
      console.log('确保模型选中: 当前未选中模型且有可用模型');
      
      // 按优先级依次尝试各种方式找到合适的模型
      // 1. 使用activeLlm或带isActive标记的模型
      if (activeLlm) {
        const activeModel = llmModels.find(model => model.id === activeLlm);
        if (activeModel) {
          setSelectedModel(activeModel);
          console.log('最终确保: 选择activeLlm对应的模型:', activeModel.name);
          return;
        }
      }
      
      // 2. 查找标记为isActive的模型
      const activeModel = llmModels.find(model => model.isActive);
      if (activeModel) {
        setSelectedModel(activeModel);
        console.log('最终确保: 选择isActive标记的模型:', activeModel.name);
        return;
      }
      
      // 3. 如果以上都没有，选择第一个模型
      setSelectedModel(llmModels[0]);
      console.log('最终确保: 选择第一个可用模型:', llmModels[0].name);
    } else if (!selectedModel) {
      // 4. 如果没有任何可用的语言模型，创建一个模拟模型
      console.log('创建本地模拟语言模型作为后备选项');
      const mockModel: Model = {
        id: 'local-mock-model',
        name: '本地模拟模型',
        provider: '模拟',
        type: 'llm',
        description: '当无法找到可用模型时的备选项',
        isActive: true,
        isFavorite: false,
        parameters: {},
        supportedLanguages: ['zh', 'en'],
        tags: ['mock', 'fallback']
      };
      setSelectedModel(mockModel);
    }
  }, [selectedModel, llmModels, activeLlm]);
  
  // 添加Markdown和代码高亮的样式
  useEffect(() => {
    // 创建style元素
    const styleEl = document.createElement('style');
    
    // 添加样式内容
    styleEl.innerHTML = `
      .markdown-content {
        font-size: 14px;
        line-height: 1.6;
      }
      
      .thinking-content {
        border-left: 3px solid #d9d9d9;
        background-color: rgba(0,0,0,0.02);
        transition: max-height 0.3s ease, opacity 0.3s ease;
        overflow: hidden;
      }
      
      .thinking-content.hidden {
        max-height: 0;
        opacity: 0;
        margin: 0;
        padding: 0;
      }
      
      .markdown-content h1,
      .markdown-content h2,
      .markdown-content h3,
      .markdown-content h4,
      .markdown-content h5,
      .markdown-content h6 {
        margin-top: 16px;
        margin-bottom: 12px;
        font-weight: 600;
      }
      
      .markdown-content h1 { font-size: 1.8em; }
      .markdown-content h2 { font-size: 1.5em; }
      .markdown-content h3 { font-size: 1.3em; }
      
      .markdown-content p {
        margin-bottom: 12px;
      }
      
      .markdown-content ul,
      .markdown-content ol {
        margin-bottom: 12px;
        padding-left: 24px;
      }
      
      .markdown-content blockquote {
        border-left: 4px solid #ddd;
        padding-left: 16px;
        margin-left: 0;
        color: #666;
      }
      
      .markdown-content code {
        font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
        padding: 2px 4px;
        font-size: 90%;
        background-color: rgba(27, 31, 35, 0.05);
        border-radius: 3px;
      }
      
      .markdown-content pre {
        margin-bottom: 16px;
        padding: 12px;
        overflow: auto;
        border-radius: 6px;
        background-color: #f6f8fa;
      }
      
      .markdown-content pre code {
        background-color: transparent;
        padding: 0;
        white-space: pre;
        font-size: 13px;
      }
      
      .markdown-content table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 16px;
      }
      
      .markdown-content table th,
      .markdown-content table td {
        padding: 8px;
        border: 1px solid #ddd;
      }
      
      .markdown-content table th {
        background-color: #f6f8fa;
        font-weight: 600;
      }
      
      .markdown-content img {
        max-width: 100%;
        height: auto;
      }
      
      .markdown-content a {
        color: #1890ff;
        text-decoration: none;
      }
      
      .markdown-content a:hover {
        text-decoration: underline;
      }
      
      /* 调整代码高亮样式，使其更适合深色主题 */
      .hljs {
        display: block;
        overflow-x: auto;
        padding: 1em;
        border-radius: 4px;
      }
    `;
    
    // 添加到document的head中
    document.head.appendChild(styleEl);
    
    // 组件卸载时移除样式
    return () => {
      document.head.removeChild(styleEl);
    };
  }, []);
  
  // 初始化一些示例聊天记录
  useEffect(() => {
    const sampleSessions: ChatSession[] = [
      {
        id: 'session-1',
        title: '关于产品功能的咨询',
        createdAt: new Date(Date.now() - 86400000 * 3),
        updatedAt: new Date(Date.now() - 86400000 * 3),
        messages: [
          {
            id: 'msg-1',
            content: '你好，我想了解一下你们的产品有哪些核心功能？',
            role: 'user',
            timestamp: new Date(Date.now() - 86400000 * 3)
          },
          {
            id: 'msg-2',
            content: '我们的知识库系统主要有以下核心功能：\n\n1. **文档管理**：支持上传、分类和版本控制各类文档\n2. **智能检索**：基于语义的文档检索，而不仅仅是关键词匹配\n3. **RAG流程编排**：可视化配置检索增强生成流程\n4. **多模型支持**：集成多种大语言模型，包括GPT-4、Claude等\n5. **权限管理**：细粒度的用户权限控制\n6. **审计日志**：完整记录系统操作，支持合规需求\n\n您对哪方面功能特别感兴趣？我可以提供更详细的介绍。',
            role: 'assistant',
            timestamp: new Date(Date.now() - 86400000 * 3),
            metadata: {
              sources: [
                { title: '产品功能介绍文档', url: '#' },
                { title: '系统架构白皮书', url: '#' }
              ],
              tokens: 256,
              processingTime: 1.2,
              model: 'gpt-4'
            }
          }
        ]
      },
      {
        id: 'session-2',
        title: '技术架构咨询',
        createdAt: new Date(Date.now() - 86400000 * 1),
        updatedAt: new Date(Date.now() - 86400000 * 1),
        messages: [
          {
            id: 'msg-3',
            content: '你们的系统架构是怎样的？可以支持私有化部署吗？',
            role: 'user',
            timestamp: new Date(Date.now() - 86400000 * 1)
          },
          {
            id: 'msg-4',
            content: '我们的系统采用微服务架构，主要组件包括：\n\n- 前端界面：React + TypeScript\n- 后端API：Node.js/Express 或 Python/FastAPI\n- 向量数据库：支持Milvus、Pinecone等\n- 文档处理服务：支持多种格式转换和索引\n- 模型协调服务：管理与各LLM API的交互\n\n关于部署方式，我们支持：\n\n1. **SaaS**：直接使用我们云端托管的服务\n2. **私有化部署**：可部署在您的内部服务器或私有云环境\n3. **混合模式**：核心数据本地存储，可选择性使用云服务\n\n私有化部署支持Docker容器和Kubernetes编排，可以根据您的基础设施需求进行定制。我们也提供完整的部署文档和技术支持。',
            role: 'assistant',
            timestamp: new Date(Date.now() - 86400000 * 1),
            metadata: {
              sources: [
                { title: '系统架构文档', url: '#' },
                { title: '部署指南', url: '#' }
              ],
              tokens: 320,
              processingTime: 1.5,
              model: 'gpt-4'
            }
          }
        ]
      }
    ];
    
    setChatSessions(sampleSessions);
  }, []);
  
  useEffect(() => {
    // 仅当消息数组非空且有新消息加入时才滚动到底部
    if (messages.length > 0) {
      scrollToBottom();
    }
  }, [messages]);
  
  const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
  };
  
  const handleKnowledgeBaseChange = (checked: boolean) => {
    setUseKnowledgeBase(checked);
    try {
      localStorage.setItem('ai_assistant_knowledge_base_enabled', JSON.stringify(checked));
      console.log('已保存知识库启用状态:', checked);
    } catch (error) {
      console.error('保存知识库启用状态失败:', error);
    }
  };

  const handleKnowledgeSourcesChange = (sources: string[]) => {
    setSelectedKnowledgeSources(sources);
    try {
      localStorage.setItem('ai_assistant_knowledge_base_sources', JSON.stringify(sources));
      console.log('已保存知识库来源:', sources);
    } catch (error) {
      console.error('保存知识库来源失败:', error);
    }
  };
  
  const handleSend = async () => {
    if (!inputValue.trim()) return;
    
    // 检查是否有可用模型，如果没有，尝试从当前可用模型中选择一个
    if (!selectedModel) {
      console.log('发送消息前检查模型状态:', { 
        selectedModel: null, 
        llmModelsCount: llmModels.length, 
        activeLlm 
      });
      
      // 尝试从模型列表中选择一个可用模型
      if (llmModels.length > 0) {
        // 按优先级尝试选择模型
        let modelToUse: Model | undefined;
        
        // 1. 优先使用activeLlm指定的模型
        if (activeLlm) {
          modelToUse = llmModels.find(model => model.id === activeLlm);
          if (modelToUse) {
            console.log('发送消息前自动选择activeLlm模型:', modelToUse.name);
          }
        }
        
        // 2. 其次尝试使用isActive标记的模型
        if (!modelToUse) {
          modelToUse = llmModels.find(model => model.isActive);
          if (modelToUse) {
            console.log('发送消息前自动选择isActive模型:', modelToUse.name);
          }
        }
        
        // 3. 最后使用第一个可用模型
        if (!modelToUse) {
          modelToUse = llmModels[0];
          console.log('发送消息前自动选择第一个可用模型:', modelToUse.name);
        }
        
        if (modelToUse) {
          setSelectedModel(modelToUse);
        } else {
          // 创建本地模拟模型
          createMockModel();
        }
      } else {
        // 创建本地模拟模型
        createMockModel();
      }
    }
    
    // 添加用户消息
    const userMessage: ChatMessage = {
      id: `msg-${Date.now()}`,
      content: inputValue,
      role: 'user',
      timestamp: new Date()
    };
    
    setMessages(prev => [...prev, userMessage]);
    setInputValue('');
    setIsTyping(true);
    
    // 创建本地模拟模型的辅助函数
    function createMockModel() {
      const mockModel: Model = {
        id: 'local-mock-model',
        name: '本地模拟模型',
        provider: '模拟',
        type: 'llm',
        description: '当无法找到可用模型时的备选项',
        isActive: true,
        isFavorite: false,
        parameters: {},
        supportedLanguages: ['zh', 'en'],
        tags: ['mock', 'fallback']
      };
      setSelectedModel(mockModel);
      console.log('创建并使用本地模拟模型:', mockModel.name);
    }
    
    try {
      // 获取当前会话的历史消息（最多4条）
      const recentMessages = currentSessionId ? 
        chatSessions
          .find(s => s.id === currentSessionId)?.messages
          .slice(-4) || [] 
        : [];
      
      // 转换为Ollama API格式的消息
      const historyMessages = recentMessages.map(msg => ({
        role: msg.role,
        content: msg.content
      }));
      
      // 准备聊天消息历史
      const chatMessages = [
        { role: "system", content: "你是一个AI助手，基于提供的上下文回答用户问题" },
        ...historyMessages,
        { role: "user", content: inputValue }
      ];
      
      // 确定模型名称（Ollama模型使用名称，其他模型使用ID）
      const modelName = selectedModel?.provider === 'Ollama' 
        ? selectedModel.name.split('/').pop() // 提取Ollama模型实际名称
        : selectedModel?.id;
      
      console.log('使用模型:', modelName, '类型:', selectedModel?.provider);
      
      // 判断是否为Ollama模型
      const isOllamaModel = selectedModel?.provider === 'Ollama';
      
      if (isOllamaModel) {
        // 获取Ollama服务器地址
        const ollamaServer = localStorage.getItem('ollamaServer') || 'http://localhost:11434';
        console.log('连接Ollama服务器:', ollamaServer);
        
        // 确保模型名称正确 - 移除可能的路径前缀，只保留模型名
        let cleanModelName = modelName;
        if (typeof modelName === 'string') {
          // 移除路径
          cleanModelName = modelName.split('/').pop() || modelName;
          // 移除可能的文件扩展名
          cleanModelName = cleanModelName.split('.')[0];
          console.log('清理后的Ollama模型名称:', cleanModelName);
        }
        
        try {
          // 检查Ollama服务器连接和获取可用模型
          const modelResult = await getOllamaAvailableModels(ollamaServer);
          
          if (!modelResult.success) {
            throw new Error(`Ollama服务器连接失败: ${modelResult.error}`);
          }
          
          // 尝试找到最匹配的模型名
          const matchedModelName = findBestMatchingModel(cleanModelName, modelResult.models);
          
          if (matchedModelName) {
            console.log(`找到匹配的Ollama模型: "${cleanModelName}" -> "${matchedModelName}"`);
            cleanModelName = matchedModelName;
          } else if (modelResult.models.length > 0) {
            console.warn(`未找到与"${cleanModelName}"匹配的模型，可用模型有: ${modelResult.models.join(', ')}`);
            // 继续使用原始名称尝试
          } else {
            console.warn('Ollama服务器未返回任何可用模型');
          }
          
          // 准备Ollama请求数据
          const ollamaRequestData = {
            model: cleanModelName,
            messages: chatMessages,
            stream: false, // 非流式响应，简化处理
            options: {
              temperature: 0.7,
              top_p: 0.9,
              top_k: 40
            }
          };
          
          console.log('发送Ollama请求:', ollamaRequestData);
          
          // 调用Ollama API
          const response = await fetch(`${ollamaServer}/api/chat`, {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
            },
            body: JSON.stringify(ollamaRequestData)
          });
          
          if (!response.ok) {
            if (response.status === 404) {
              // 404错误通常意味着模型不存在
              const suggestedModels = modelResult.models.length > 0 
                ? `\n\n可用模型: ${modelResult.models.slice(0, 5).join(', ')}${modelResult.models.length > 5 ? '...' : ''}`
                : '';
              
              throw new Error(`模型 "${cleanModelName}" 未在Ollama服务器上找到。请确保已安装该模型，可运行命令: ollama pull ${cleanModelName}${suggestedModels}`);
            } else if (response.status === 400) {
              // 400错误可能是格式问题
              const errorData = await response.json().catch(() => ({}));
              throw new Error(`Ollama API请求格式错误: ${errorData.error || response.statusText}`);
            } else {
              throw new Error(`Ollama API错误: ${response.status} ${response.statusText}`);
            }
          }
          
          // 解析Ollama响应
          const responseData = await response.json();
          console.log('Ollama响应:', responseData);
          
          // 获取响应内容并确保代码块格式正确
          let responseContent = responseData.message?.content || "抱歉，我无法生成回复。";
          
          // 确保代码块有正确的Markdown语法
          // 将无语言标识的代码块替换为有语言标识的代码块
          responseContent = responseContent.replace(/```\s*\n/g, '```text\n');
          
          // 添加AI助手回复
          const assistantMessage: ChatMessage = {
            id: `msg-${Date.now() + 1}`,
            content: responseContent,
            role: 'assistant',
            timestamp: new Date(),
            metadata: {
              tokens: responseData.eval_count || 0,
              processingTime: responseData.total_duration ? responseData.total_duration / 1000000000 : 0, // 转换为秒
              model: selectedModel?.name
            }
          };
          
          setMessages(prev => [...prev, assistantMessage]);
          
          // 处理会话管理
          if (!currentSessionId) {
            // 创建新会话
            const newSession: ChatSession = {
              id: `session-${Date.now()}`,
              title: userMessage.content.substring(0, 30) + (userMessage.content.length > 30 ? '...' : ''),
              createdAt: new Date(),
              updatedAt: new Date(),
              messages: [userMessage, assistantMessage]
            };
            
            setChatSessions(prev => [newSession, ...prev]);
            setCurrentSessionId(newSession.id);
            message.success('已创建新的对话');
          } else {
            // 更新当前会话
            setChatSessions(prev => prev.map(session => 
              session.id === currentSessionId 
                ? { 
                    ...session, 
                    updatedAt: new Date(),
                    messages: [...session.messages, userMessage, assistantMessage]
                  } 
                : session
            ));
          }
        } catch (error) {
          console.error('Ollama API调用失败:', error);
          
          // 显示错误消息
          const errorMessage: ChatMessage = {
            id: `msg-${Date.now() + 1}`,
            content: `调用Ollama模型失败: ${error instanceof Error ? error.message : '未知错误'}。\n\n可能的解决方案:\n1. 确保Ollama服务器已启动(默认地址: http://localhost:11434)\n2. 检查模型名称是否正确\n3. 尝试安装模型: ollama pull ${cleanModelName}\n4. 检查网络连接和防火墙设置`,
            role: 'assistant',
            timestamp: new Date()
          };
          
          setMessages(prev => [...prev, errorMessage]);
          message.error('Ollama模型调用失败，请检查服务器状态和模型是否已安装');
          
          // 尝试提供有用的诊断信息和建议
          try {
            // 尝试连接Ollama服务器
            fetch(`${ollamaServer}/api/version`)
              .then(response => {
                if (response.ok) {
                  message.info('Ollama服务器可访问，但模型可能未安装或有其他问题');
                  console.log('Ollama服务器可以访问，问题可能是模型未安装');
                } else {
                  console.log('无法连接Ollama服务器，状态码:', response.status);
                }
              })
              .catch(e => {
                console.log('无法连接Ollama服务器:', e.message);
                message.warning('无法连接Ollama服务器，请确认服务器是否正在运行');
              });
          } catch (diagError) {
            console.error('诊断Ollama服务器失败:', diagError);
          }
        }
      } else {
        // 对于非Ollama模型，使用原有的模拟回复逻辑
        // 模拟API请求延迟
        setTimeout(() => {
          // 添加AI助手回复
          let assistantContent = '';
          let metadataSources = [];
          
          // 根据问题生成不同的模拟回复
          if (inputValue.toLowerCase().includes('价格') || inputValue.toLowerCase().includes('费用')) {
            assistantContent = "我们提供多种价格方案，从基础版到企业版：\n\n**基础版**：每月¥2,999，支持最多10个用户，100GB存储空间\n**专业版**：每月¥7,999，支持最多50个用户，500GB存储空间\n**企业版**：每月¥19,999，支持无限用户，2TB存储空间，专属技术支持\n\n所有版本都包含核心功能，高级版本增加了更多企业级功能和更高的服务等级。我们也提供私有化部署定制报价，您可以联系销售团队获取更详细的信息。";
            metadataSources = [{ title: '产品价格方案', url: '#' }];
          } else if (inputValue.toLowerCase().includes('安全') || inputValue.toLowerCase().includes('隐私')) {
            assistantContent = "我们非常重视数据安全和隐私保护，系统采取了多层次的安全措施：\n\n1. **数据加密**：所有数据传输采用TLS 1.3加密，存储采用AES-256加密\n2. **访问控制**：基于角色的细粒度权限管理，支持多因素认证\n3. **合规性**：符合GDPR、SOC 2、ISO 27001等标准\n4. **数据隔离**：客户数据严格隔离，私有化部署可确保数据不出企业内网\n5. **审计日志**：所有操作留有可追溯的审计记录\n\n对于特别敏感的行业，我们还提供定制化的安全解决方案，可以与您的安全团队深入讨论具体需求。";
            metadataSources = [
              { title: '安全白皮书', url: '#' },
              { title: '隐私政策', url: '#' }
            ];
          } else if (inputValue.toLowerCase().includes('demo') || inputValue.toLowerCase().includes('演示')) {
            assistantContent = "很高兴您对演示感兴趣！我们提供多种方式了解产品：\n\n1. **在线Demo**：您可以访问我们的演示环境，无需注册即可体验核心功能\n2. **预约演示**：由我们的产品专家进行1对1详细演示，针对您的具体需求进行讲解\n3. **试用账号**：申请14天全功能试用账号，体验完整产品功能\n\n您更倾向于哪种方式？我可以帮您安排。";
            metadataSources = [{ title: '产品演示预约', url: '#' }];
          } else if (inputValue.toLowerCase().includes('代码') || inputValue.toLowerCase().includes('示例')) {
            assistantContent = `## 代码示例\n\n以下是一个简单的React组件示例，展示如何创建一个带有Markdown支持的聊天界面：\n\n\`\`\`jsx\nimport React, { useState } from 'react';\nimport MarkdownIt from 'markdown-it';\nimport 'highlight.js/styles/github.css';\n\nconst md = new MarkdownIt({\n  html: false,\n  linkify: true,\n  typographer: true,\n  highlight: function(str, lang) {\n    // 实现代码高亮...\n  }\n});\n\nconst ChatComponent = () => {\n  const [messages, setMessages] = useState([]);\n  const [input, setInput] = useState('');\n  \n  const handleSend = () => {\n    // 处理发送消息逻辑\n    setMessages([...messages, {\n      role: 'user',\n      content: input\n    }]);\n    setInput('');\n    \n    // 模拟AI响应\n    setTimeout(() => {\n      setMessages(msgs => [...msgs, {\n        role: 'assistant',\n        content: '这是一个*Markdown*格式的**回复**'\n      }]);\n    }, 1000);\n  };\n  \n  return (\n    <div className="chat-container">\n      <div className="messages">\n        {messages.map((msg, index) => (\n          <div key={index} className={\`message \${msg.role}\`}>\n            {msg.role === 'assistant' ? (\n              <div dangerouslySetInnerHTML={{ __html: md.render(msg.content) }} />\n            ) : (\n              <div>{msg.content}</div>\n            )}\n          </div>\n        ))}\n      </div>\n      <div className="input-area">\n        <input \n          value={input}\n          onChange={(e) => setInput(e.target.value)}\n          onKeyPress={(e) => e.key === 'Enter' && handleSend()}\n        />\n        <button onClick={handleSend}>发送</button>\n      </div>\n    </div>\n  );\n};\n\nexport default ChatComponent;\n\`\`\`\n\n### 如何使用\n\n1. 安装依赖：\n\`\`\`bash\nnpm install markdown-it highlight.js\n\`\`\`\n\n2. 导入组件并使用：\n\`\`\`jsx\nimport ChatComponent from './ChatComponent';\n\nfunction App() {\n  return <ChatComponent />;\n}\n\`\`\`\n\n您可以根据需要修改样式和功能。`;
            metadataSources = [
              { title: 'React文档', url: 'https://reactjs.org/' },
              { title: 'Markdown-it文档', url: 'https://github.com/markdown-it/markdown-it' }
            ];
          } else if (inputValue.toLowerCase().includes('表格') || inputValue.toLowerCase().includes('数据')) {
            assistantContent = `## 数据分析结果\n\n下面是我们对最近一个季度的数据分析结果：\n\n| 指标 | Q1 | Q2 | Q3 | Q4 |\n|------|----|----|----|----|  \n| 用户增长 | 15% | 22% | 18% | 25% |\n| 活跃度 | 68% | 72% | 75% | 79% |\n| 转化率 | 5.2% | 5.8% | 6.1% | 6.5% |\n| 客单价 | ¥299 | ¥325 | ¥340 | ¥378 |\n\n### 主要发现\n\n1. 用户增长在Q4达到最高，同比增长25%\n2. 活跃度稳步提升，Q4达到79%的历史新高\n3. 转化率呈现稳步上升趋势\n\n> 注意：这些数据表明我们的产品策略是有效的，特别是在用户留存方面取得了显著成果。\n\n下一步建议：\n* 继续优化用户引导流程\n* 增强产品的社交属性\n* 推出更多针对高价值用户的功能`;
            metadataSources = [
              { title: '季度数据报告', url: '#' },
              { title: '用户增长分析', url: '#' }
            ];
          } else {
            assistantContent = `感谢您的问题。基于您提到的"${inputValue.substring(0, 20)}..."，我建议您可以了解我们的知识库解决方案，它能帮助企业构建智能化的信息管理系统。\n\n我们的系统通过先进的RAG技术，将企业内部文档与大语言模型结合，提供精准的信息检索和问答服务。系统特点包括：\n\n1. 支持多种文档格式的智能处理\n2. 自定义知识图谱构建\n3. 精确的相关性搜索\n4. 便捷的流程配置工具\n\n您有任何特定方面的问题，我都可以为您提供更详细的信息。`;
            metadataSources = [
              { title: '产品介绍', url: '#' },
              { title: '技术白皮书', url: '#' }
            ];
          }
          
          const assistantMessage: ChatMessage = {
            id: `msg-${Date.now() + 1}`,
            content: assistantContent,
            role: 'assistant',
            timestamp: new Date(),
            metadata: {
              sources: metadataSources,
              tokens: Math.floor(Math.random() * 200) + 100,
              processingTime: Math.random() * 2 + 0.5,
              model: selectedModel?.id
            }
          };
          
          setMessages(prev => [...prev, assistantMessage]);
          
          // 如果这是新对话的第一条消息，创建新会话
          if (!currentSessionId) {
            const newSession: ChatSession = {
              id: `session-${Date.now()}`,
              title: userMessage.content.substring(0, 30) + (userMessage.content.length > 30 ? '...' : ''),
              createdAt: new Date(),
              updatedAt: new Date(),
              messages: [userMessage, assistantMessage]
            };
            
            setChatSessions(prev => [newSession, ...prev]);
            setCurrentSessionId(newSession.id);
            message.success('已创建新的对话');
          } else {
            // 更新当前会话
            setChatSessions(prev => prev.map(session => 
              session.id === currentSessionId 
                ? { 
                    ...session, 
                    updatedAt: new Date(),
                    messages: [...session.messages, userMessage, assistantMessage]
                  } 
                : session
            ));
          }
        }, 1500);
      }
    } catch (error) {
      console.error('发送消息出错:', error);
      setIsTyping(false);
      message.error('发送消息失败，请重试');
    } finally {
      setIsTyping(false);
    }
  };
  
  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      handleSend();
    }
  };
  
  const handleClearChat = () => {
    setMessages([]);
    setCurrentSessionId(null);
  };
  
  const loadChatSession = (sessionId: string) => {
    const session = chatSessions.find(s => s.id === sessionId);
    if (session) {
      setMessages(session.messages);
      setCurrentSessionId(session.id);
      setHistoryDrawerVisible(false);
      message.success(`已加载对话: ${session.title}`);
    }
  };
  
  const deleteChatSession = (sessionId: string, e: React.MouseEvent) => {
    e.stopPropagation();
    setChatSessions(prev => prev.filter(s => s.id !== sessionId));
    if (currentSessionId === sessionId) {
      setMessages([]);
      setCurrentSessionId(null);
    }
    message.success('已删除对话');
  };
  
  const copyMessageContent = async (content: string) => {
    try {
      await navigator.clipboard.writeText(content);
      message.success('已复制到剪贴板');
    } catch (err) {
      console.error('复制失败:', err);
      message.error('复制失败');
    }
  };
  
  // 渲染消息
  const renderMessage = (msg: ChatMessage) => {
    const isUser = msg.role === 'user';
    
    // 为AI消息渲染Markdown
    const renderContent = () => {
      if (isUser) {
        return (
          <div style={{ 
            whiteSpace: 'pre-wrap',
            wordBreak: 'break-word',
            fontSize: '14px',
            lineHeight: '1.5'
          }}>
            {msg.content}
          </div>
        );
      } else {
        // 检查是否包含思考过程标记
        const thinkPattern = /([\s\S]*)<\/think>([\s\S]*)/;
        const match = msg.content.match(thinkPattern);
        
        if (match) {
          const thinkingContent = match[1];
          const finalContent = match[2];
          
          return (
            <div>
              {thinkingContent && (
                <div style={{ marginBottom: '10px' }}>
                  <div style={{ 
                    display: 'flex', 
                    justifyContent: 'space-between',
                    alignItems: 'center', 
                    marginBottom: '5px' 
                  }}>
                    <Text type="secondary" style={{ fontSize: '13px' }}>思考过程</Text>
                    <Button 
                      type="link" 
                      size="small" 
                      onClick={() => setShowThinkingProcess(!showThinkingProcess)}
                      style={{ padding: '0', fontSize: '12px' }}
                    >
                      {showThinkingProcess ? '隐藏' : '显示'}
                    </Button>
                  </div>
                  
                  {showThinkingProcess && (
                    <div
                      className="markdown-content"
                      style={{ 
                        wordBreak: 'break-word',
                        padding: '10px',
                        backgroundColor: 'rgba(0,0,0,0.02)',
                        borderRadius: '4px',
                        fontSize: '13px',
                        color: '#666',
                        border: '1px solid #eee'
                      }}
                      dangerouslySetInnerHTML={{ __html: md.render(thinkingContent.trim()) }}
                    />
                  )}
                </div>
              )}
              
              {finalContent && (
                <div>
                  <div style={{ marginBottom: '5px' }}>
                    <Text style={{ fontSize: '13px' }}>回答</Text>
                  </div>
                  <div
                    className="markdown-content"
                    style={{ wordBreak: 'break-word' }}
                    dangerouslySetInnerHTML={{ __html: md.render(finalContent.trim()) }}
                  />
                </div>
              )}
            </div>
          );
        }
        
        // 没有思考过程标记，正常渲染
        return (
          <div
            className="markdown-content"
            style={{ 
              wordBreak: 'break-word'
            }}
            dangerouslySetInnerHTML={{ __html: md.render(msg.content) }}
          />
        );
      }
    };
    
    return (
      <div 
        key={msg.id} 
        style={{ 
          display: 'flex',
          justifyContent: isUser ? 'flex-end' : 'flex-start',
          marginBottom: '12px',
          width: '100%'
        }}
      >
        <div style={{
          padding: isUser ? '14px 18px' : '16px 20px',
          backgroundColor: isUser ? token.colorBgContainer : token.colorFillQuaternary,
          borderRadius: '12px',
          maxWidth: '88%',
          boxShadow: '0 1px 6px rgba(0, 0, 0, 0.05)',
          border: isUser ? `1px solid ${token.colorBorderSecondary}` : 'none'
        }}>
          <div style={{ display: 'flex', alignItems: 'flex-start', gap: '12px' }}>
            <Avatar 
              icon={isUser ? <UserOutlined /> : <RobotOutlined />} 
              style={{ 
                backgroundColor: isUser ? token.colorPrimary : '#52c41a',
                marginTop: '2px',
                width: '36px',
                height: '36px',
                fontSize: '18px',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                flexShrink: 0
              }}
              size="default"
            />
            
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '6px' }}>
                <Text strong style={{ fontSize: '15px' }}>{isUser ? '你' : 'AI助手'}</Text>
                <Space>
                  {!isUser && msg.metadata?.model && (
                    <Tag color="blue" style={{ padding: '2px 6px', fontSize: '12px' }}>模型: {msg.metadata.model}</Tag>
                  )}
                  {!isUser && (msg.metadata?.processingTime || msg.metadata?.tokens) && (
                    <Text type="secondary" style={{ fontSize: 12 }}>
                      {msg.metadata.tokens && `${msg.metadata.tokens}个Token`}
                      {msg.metadata.processingTime && msg.metadata.tokens && ' | '}
                      {msg.metadata.processingTime && `${msg.metadata.processingTime.toFixed(2)}秒`}
                    </Text>
                  )}
                  <Button 
                    type="text" 
                    icon={<CopyOutlined />} 
                    onClick={() => copyMessageContent(msg.content)}
                    size="small"
                  />
                </Space>
              </div>
              
              <div>
                {renderContent()}
                
                {!isUser && msg.metadata?.sources && msg.metadata.sources.length > 0 && (
                  <div style={{ marginTop: 12, padding: '10px', backgroundColor: 'rgba(0,0,0,0.02)', borderRadius: '6px' }}>
                    <Text type="secondary" style={{ fontSize: 12, display: 'block', marginBottom: '3px' }}>参考来源:</Text>
                    <ul style={{ margin: '3px 0', paddingLeft: 18 }}>
                      {msg.metadata.sources.map((source, index) => (
                        <li key={index} style={{ marginBottom: '3px' }}>
                          {source.url ? (
                            <a href={source.url} target="_blank" rel="noopener noreferrer">
                              {source.title}
                            </a>
                          ) : (
                            <Text>{source.title}</Text>
                          )}
                        </li>
                      ))}
                    </ul>
                  </div>
                )}
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  };
  
  // 渲染历史对话抽屉
  const renderHistoryDrawer = () => {
    return (
      <Drawer
        title="对话历史"
        placement="left"
        width={320}
        onClose={() => setHistoryDrawerVisible(false)}
        open={historyDrawerVisible}
        extra={
          <Button 
            icon={<PlusOutlined />} 
            type="primary"
            onClick={() => {
              setMessages([]);
              setCurrentSessionId(null);
              setHistoryDrawerVisible(false);
            }}
          >
            新对话
          </Button>
        }
      >
        {chatSessions.length === 0 ? (
          <Empty description="暂无对话历史" />
        ) : (
          <List
            dataSource={chatSessions.sort((a, b) => b.updatedAt.getTime() - a.updatedAt.getTime())}
            renderItem={session => (
              <List.Item
                style={{ 
                  cursor: 'pointer',
                  backgroundColor: session.id === currentSessionId ? token.colorBgTextHover : 'transparent',
                  padding: '8px 12px',
                  borderRadius: '4px',
                  marginBottom: '4px'
                }}
                onClick={() => loadChatSession(session.id)}
                actions={[
                  <Button
                    key="delete"
                    type="text"
                    danger
                    icon={<DeleteOutlined />}
                    onClick={(e) => deleteChatSession(session.id, e)}
                  />
                ]}
              >
                <List.Item.Meta
                  title={<Text ellipsis>{session.title}</Text>}
                  description={
                    <Text type="secondary" style={{ fontSize: '12px' }}>
                      {session.messages.length}条消息 · {new Date(session.updatedAt).toLocaleDateString()}
                    </Text>
                  }
                />
              </List.Item>
            )}
          />
        )}
      </Drawer>
    );
  };
  
  // 渲染设置抽屉
  const renderSettingsDrawer = () => {
    return (
      <Drawer
        title="对话设置"
        placement="right"
        onClose={() => setSettingsDrawerVisible(false)}
        open={settingsDrawerVisible}
        width={400}
      >
        <Space direction="vertical" style={{ width: '100%' }} size="large">
          <div>
            <Title level={5}>当前使用的模型</Title>
            <div style={{ padding: 12, backgroundColor: '#f6f6f6', borderRadius: 6 }}>
              {selectedModel ? (
                <Space direction="vertical" style={{ width: '100%' }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                    <Space>
                      <ApiOutlined />
                      <Text strong>{selectedModel.name}</Text>
                    </Space>
                    <Tag color={selectedModel.isActive ? 'success' : 'default'}>
                      {selectedModel.provider}
                    </Tag>
                  </div>
                  <Text type="secondary">
                    使用模型中心配置和管理模型
                  </Text>
                  <Button 
                    size="small" 
                    onClick={() => {
                      // 这里可以添加导航到模型中心的逻辑
                      message.info('请前往模型中心管理模型');
                    }}
                    icon={<SettingOutlined />}
                  >
                    前往模型中心
                  </Button>
                </Space>
              ) : (
                <Space direction="vertical" style={{ width: '100%' }}>
                  <Alert
                    message="未检测到可用模型"
                    description="请前往模型中心启用至少一个语言模型"
                    type="warning"
                    showIcon
                  />
                  <Button 
                    size="small" 
                    onClick={() => {
                      // 这里可以添加导航到模型中心的逻辑
                      message.info('请前往模型中心管理模型');
                    }}
                    icon={<SettingOutlined />}
                  >
                    前往模型中心
                  </Button>
                </Space>
              )}
            </div>
            
            {/* Ollama连接状态信息 */}
            {selectedModel?.provider === 'Ollama' && (
              <div style={{ marginTop: 12, padding: 12, backgroundColor: '#f6f6f6', borderRadius: 6 }}>
                <Space direction="vertical" style={{ width: '100%' }}>
                  <Space>
                    <ApiOutlined />
                    <Text strong>Ollama连接信息</Text>
                  </Space>
                  <div>
                    <Text>服务器地址: </Text>
                    <Text code>{localStorage.getItem('ollamaServer') || 'http://localhost:11434'}</Text>
                  </div>
                  <Space>
                    <Button 
                      size="small" 
                      type="primary"
                      onClick={() => {
                        // 打开模型中心的Ollama配置
                        message.info('请在模型中心配置Ollama服务器');
                      }}
                    >
                      修改配置
                    </Button>
                    <Button 
                      size="small"
                      onClick={async () => {
                        try {
                          const ollamaServer = localStorage.getItem('ollamaServer') || 'http://localhost:11434';
                          const response = await fetch(`${ollamaServer}/api/version`);
                          if (response.ok) {
                            const data = await response.json();
                            message.success(`Ollama服务器连接成功，版本: ${data.version}`);
                          } else {
                            message.error('Ollama服务器连接失败');
                          }
                        } catch (error) {
                          message.error('Ollama服务器连接失败');
                          console.error('连接测试失败:', error);
                        }
                      }}
                    >
                      测试连接
                    </Button>
                  </Space>
                </Space>
              </div>
            )}
            
            <Divider />
          </div>
          
          <div>
            <Title level={5}>知识库设置</Title>
            <Space direction="vertical" style={{ width: '100%' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <Text>启用知识库</Text>
                <Switch 
                  checked={useKnowledgeBase}
                  onChange={handleKnowledgeBaseChange}
                />
              </div>
              
              {useKnowledgeBase && (
                <>
                  <Text type="secondary">选择知识库来源</Text>
                  <Select
                    mode="multiple"
                    style={{ width: '100%' }}
                    placeholder="选择知识库来源（可多选）"
                    value={selectedKnowledgeSources}
                    onChange={handleKnowledgeSourcesChange}
                    options={[
                      { label: '产品文档', value: 'product_docs' },
                      { label: '技术文档', value: 'tech_docs' },
                      { label: '用户手册', value: 'user_manual' },
                      { label: '常见问题', value: 'faq' },
                      { label: '内部知识库', value: 'internal_kb' }
                    ]}
                  />
                </>
              )}
            </Space>
            
            <Divider />
          </div>
          
          <div>
            <Title level={5}>上下文设置</Title>
            <Space direction="vertical" style={{ width: '100%' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <Text>保留上下文消息</Text>
                <Radio.Group defaultValue="medium">
                  <Radio.Button value="short">少量</Radio.Button>
                  <Radio.Button value="medium">中等</Radio.Button>
                  <Radio.Button value="long">大量</Radio.Button>
                </Radio.Group>
              </div>
              <Text type="secondary" style={{ fontSize: '12px' }}>
                决定AI回复时考虑的历史消息数量。消息越多，上下文理解越好，但会消耗更多Token。
              </Text>
            </Space>
          </div>
        </Space>
      </Drawer>
    );
  };

  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
      <Card
        title={
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <span style={{ fontSize: '16px', fontWeight: 600 }}>AI对话</span>
            <Space size="small">
              <Tooltip title="历史对话">
                <Button
                  icon={<HistoryOutlined />}
                  onClick={() => setHistoryDrawerVisible(true)}
                  size="middle"
                />
              </Tooltip>
              <Tooltip title="设置">
                <Button
                  icon={<SettingOutlined />}
                  onClick={() => setSettingsDrawerVisible(true)}
                  size="middle"
                />
              </Tooltip>
              <Tooltip title="清空对话">
                <Button
                  icon={<ClearOutlined />}
                  onClick={handleClearChat}
                  size="middle"
                />
              </Tooltip>
            </Space>
          </div>
        }
        bordered={false}
        style={{ 
          height: '100%', 
          display: 'flex', 
          flexDirection: 'column',
          borderRadius: 0,
          boxShadow: 'none'
        }}
        bodyStyle={{ 
          flex: 1, 
          padding: '16px 20px', 
          overflow: 'auto',
          display: 'flex',
          flexDirection: 'column'
        }}
        headStyle={{
          padding: '12px 20px',
          borderBottom: '1px solid #f0f0f0'
        }}
      >
        <div style={{ flex: 1, overflow: 'auto', marginBottom: '16px' }}>
          {messages.length === 0 ? (
            <Empty 
              description={
                <div style={{ marginTop: '20px' }}>
                  <Text style={{ fontSize: '15px' }}>开始一段新的对话吧</Text>
                  {/* 添加一些示例提示 */}
                  <div style={{ marginTop: '24px' }}>
                    <Text type="secondary" style={{ display: 'block', marginBottom: '12px', fontSize: '13px' }}>示例问题:</Text>
                    <Space direction="vertical" style={{ width: '100%' }} size="middle">
                      {['请介绍一下你们的主要产品功能', '你们的系统支持私有化部署吗？', '如何开始使用知识库功能？'].map((q, i) => (
                        <Card 
                          key={i} 
                          size="small" 
                          hoverable 
                          style={{ cursor: 'pointer', padding: '10px', borderRadius: '6px' }}
                          onClick={() => setInputValue(q)}
                        >
                          {q}
                        </Card>
                      ))}
                    </Space>
                  </div>
                </div>
              }
              style={{ marginTop: '60px' }}
              imageStyle={{ height: '70px' }}
            />
          ) : (
            <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
              {messages.map(msg => renderMessage(msg))}
            </div>
          )}
          {isTyping && (
            <div style={{ padding: '12px 24px', display: 'flex', alignItems: 'center', gap: '10px' }}>
              <LoadingOutlined style={{ fontSize: '16px' }} />
              <Text type="secondary" style={{ fontSize: '14px' }}>AI正在思考中...</Text>
            </div>
          )}
          <div ref={messagesEndRef} />
        </div>
        
        <div style={{ 
          display: 'flex', 
          flexDirection: 'column',
          backgroundColor: token.colorBgContainer,
          padding: '16px 20px',
          borderRadius: '10px',
          boxShadow: '0 2px 8px rgba(0, 0, 0, 0.06)'
        }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '12px' }}>
            <Space size="small">
              {selectedModel ? (
                <Tag color="blue" icon={<ApiOutlined />} style={{ padding: '4px 8px', fontSize: '13px' }}>
                  {selectedModel.name} ({selectedModel.provider})
                </Tag>
              ) : (
                <Tag color="error" icon={<WarningOutlined />} style={{ padding: '4px 8px', fontSize: '13px' }}>
                  未检测到可用模型，请前往模型中心配置
                </Tag>
              )}
              <Tooltip title={useKnowledgeBase ? "知识库增强已启用" : "知识库增强已禁用"}>
                <Button 
                  type={useKnowledgeBase ? "primary" : "default"}
                  icon={<DatabaseOutlined />}
                  onClick={() => handleKnowledgeBaseChange(!useKnowledgeBase)}
                  size="small"
                >
                  知识库
                </Button>
              </Tooltip>
            </Space>
            <Space size="small">
              <Upload
                fileList={uploadedFiles}
                onChange={({ fileList }) => setUploadedFiles(fileList)}
                multiple
                showUploadList={false}
              >
                <Tooltip title="上传附件">
                  <Button icon={<PaperClipOutlined />} size="small" />
                </Tooltip>
              </Upload>
              {uploadedFiles.length > 0 && (
                <Tag color="blue" style={{ padding: '3px 6px' }}>
                  已选择{uploadedFiles.length}个文件
                </Tag>
              )}
            </Space>
          </div>
          
          <div style={{ display: 'flex', gap: '10px' }}>
            <Input.TextArea
              value={inputValue}
              onChange={e => setInputValue(e.target.value)}
              onKeyDown={handleKeyDown}
              placeholder="输入消息，Shift+Enter换行..."
              autoSize={{ minRows: 2, maxRows: 6 }}
              style={{ 
                flex: 1, 
                padding: '10px 14px', 
                fontSize: '14px',
                borderRadius: '6px',
                resize: 'none'
              }}
            />
            <Button 
              type="primary" 
              icon={<SendOutlined />}
              onClick={handleSend}
              disabled={!inputValue.trim() || isTyping}
              size="middle"
              style={{ height: 'auto', borderRadius: '6px', width: '70px' }}
            >
              发送
            </Button>
          </div>
        </div>
      </Card>
      
      {renderHistoryDrawer()}
      {renderSettingsDrawer()}
    </div>
  );
};

export default ChatInterface; 